<template>
  <div>
    <el-input v-model="classname" placeholder="请输入班级名称" style="width: 200px;margin-right: 10px" clearable></el-input>
    <el-input v-model="teachername" placeholder="请输入老师名称" style="width: 200px;margin-right: 10px" clearable></el-input>
<el-button @click="search" type="primary">搜索</el-button>
    <el-button @click="addClass" type="primary">添加班级</el-button>
  </div>
  <div>
<el-table
    :data="classData"
    :preserve-expanded-content="preserveExpanded"
    style="width: 100%"
    show-overflow-tooltip="true"
    border
>
  <el-table-column label="序号" width="80" align="center">
    <template #default="scope">
      {{ (currentPage - 1) * pagesize + scope.$index + 1 }}
    </template>
  </el-table-column>
  <el-table-column
      property="classId"
      label="班级编号"
      width="90"
      align="center"
      header-align="center"
  />
  <el-table-column
      property="className"
      label="班级名称"
      width="180"
      align="center"
      header-align="center"
  />
  <el-table-column
      property="teacherName"
      label="老师姓名"
      width="180"
      align="center"
      header-align="center"
  />
  <el-table-column
      property="classInviteCode"
      label="邀请码"
      width="180"
      align="center"
      header-align="center"
  />
  <el-table-column
      property="classDescribe"
      label="描述"
      width="180"
      align="center"
      header-align="center"
  />
  <el-table-column
      property="status"
      label="状态"
      width="120"
      align="center"
      header-align="center"
  >
    <template #default="scope">
      <p v-if="scope.row.status === 'active'" style="color: dodgerblue">活跃中</p>
      <p v-else style="color: red">已停止</p>
    </template>
  </el-table-column>
  <el-table-column
      property="createTime"
      label="创建时间"
      width="180"
      align="center"
      header-align="center"
  />
  <el-table-column
      property="studentNum"
      label="学生数量"
      width="120"
      align="center"
      header-align="center"
  />
  <el-table-column
      label="操作"
      width="180"
      align="center"
      header-align="center"
  >
    <template #default="scope">
      <el-button @click="handleEdit(scope.$index,scope.row)" type="primary" size="small">编辑</el-button>
      <el-button @click="handleUpdateStatus(scope.$index,scope.row)" :type="scope.row.status === 'active' ? 'danger' : 'success'"  size="small">
        {{scope.row.status==="active"?"冻结":"解冻"}}
      </el-button>
    </template>
  </el-table-column>
  <el-table-column type="expand" label="查看学生名单" width="156">
    <template #default="props">
      <el-table
          :data="props.row.students"
          border
          style="width: 100%"
          show-overflow-tooltip="true"
      >
        <el-table-column label="序号" width="80" align="center">
          <template #default="scope">
            {{ (currentPage - 1) * pagesize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
            property="studentId"
            label="学生编号"
            width="180"
            align="center"
            header-align="center"
        />
        <el-table-column
            property="account"
            label="学生账号"
            width="180"
            align="center"
            header-align="center"
        />
        <el-table-column
            property="username"
            label="学生姓名"
            width="180"
            align="center"
            header-align="center"
        />
        <el-table-column
            property="avatar"
            label="头像"
            width="180"
            align="center"
            header-align="center"
        >
          <template #default="{row}">
            <img :src="row.avatar?row.avatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt=""
                 style="width: 40px; height: 40px; border-radius: 50%"
                 @error="handleImageError"
            />
          </template>
        </el-table-column>
        <el-table-column
            property="joinedAt"
            label="加入班级时间"
            width="180"
            align="center"
            header-align="center"
        />
        <el-table-column
          label="操作"
          width="180"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <el-button @click="handleDeleteStudent(scope.$index,scope.row.studentId,props.row.classId)" type="danger" size="small">踢出班级</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-table-column>

</el-table>
  </div>
  <div style="display: flex;justify-content: center">
    <el-pagination
        v-model:current-page="pageno"
        v-model:page-size="pagesize"
        :page-sizes="[10, 20, 40, 50]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog
      v-model="dialogVisible"
      :title="diaTitle"
      width="500"
      :before-close="handleClose"
  >
    <el-form :model="classinfo" label-width="auto" style="max-width: 600px" >
      <el-form-item label="班级名称">
        <el-input v-model="classinfo.className" clearable/>
      </el-form-item>
      <el-form-item label="班级描述">
        <el-input v-model="classinfo.classDescribe" clearable/>
      </el-form-item>
      <el-form-item label="老师">
        <el-select
            v-model="classinfo.teacherName"
            filterable
            placeholder="请选择老师"
            style="width: 240px"
        >
          <el-option
              v-for="item in teacherList"
              :key="item.userId"
              :label="item.username"
              :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="justify-content: center">
        <el-button type="primary" @click="confirm()">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {Search,UpdateStatus,DeleteStudent,AddClass,UpdateClass} from '../../../api/classc.js'
import {GetAllTeacher} from '../../../api/user.js'
import {ref,onMounted} from 'vue'
import {ElMessage} from "element-plus";

const currentPage=ref(1)
const pageno=ref(1)
const pagesize=ref(10)
const classname=ref('')
const teachername=ref('')
const total=ref(0)
const preserveExpanded = ref(false)
const classData=ref([{
  classId:'',
  className:'',
  teacherName:'',
  classInviteCode:'',
  classDescribe:'',
  status:'',
  createTime:'',
  studentNum:'',
  students:[{
    studentId:'',
    account:'',
    username:'',
    avatar:'',
    joinedAt:''
  }]
}])
const dialogVisible=ref(false)
const isAdd=ref(false)
const diaTitle=ref('')
const classinfo=ref({
  classId:'',
  className:'',
  teacherId:'',
  classInviteCode:'',
  classDescribe:'',
  status:'',
  createTime:''
})
const teacherList=ref({
  userId:'',
  username:''
})
const search=()=>{
  Search({
    pageno:pageno.value,
    pagesize:pagesize.value,
    classname:classname.value,
    teachername:teachername.value
  }).then(res=>{
    classData.value=res.data.data.records
    total.value=res.data.data.total
  })
}
const handleSizeChange=(size)=>{
  pagesize.value=size
  search()
}
const handleCurrentChange=(currentPage)=>{
  pageno.value=currentPage
  search()
}
const handleImageError = (e) => {
  e.target.src = 'https://example.com/default-avatar.png'; // 你的默认图地址
}
const handleClose = () => {
  dialogVisible.value = false
}
const handleEdit=(index,row)=>{
  diaTitle.value='编辑班级'
  classinfo.value=row
  dialogVisible.value=true
  isAdd.value=false
  getTeacherList()
}
const handleUpdateStatus=(index,row)=>{
  console.log(row)
  UpdateStatus(row).then(res=>{
    if(res.data.code===200){
      ElMessage.success(res.data.message)
    }
    search()
  })
}
const addClass=()=>{
  diaTitle.value='添加班级'
  classinfo.value={}
  dialogVisible.value=true
  isAdd.value=true
  getTeacherList()
}
const confirm = () => {
  if(isAdd.value){
    AddClass({
      name:classinfo.value.className,
      teacherId:classinfo.value.teacherName,
      description:classinfo.value.classDescribe
    }).then(res=>{
      search()
    })
  }else {
    UpdateClass({
      classId:classinfo.value.classId,
      name:classinfo.value.className,
      teacherId:classinfo.value.teacherName,
      description:classinfo.value.classDescribe
    }).then(res=>{
      search()
    })
  }
  dialogVisible.value=false
}
const handleDeleteStudent=(index,studentId,classId)=>{
  DeleteStudent({
    userId:studentId,
    classId:classId
  }).then(res=>{
    if(res.data.code===200){
      ElMessage.success(res.data.message)
      search()
    }
  })
}
const getTeacherList=()=>{
  GetAllTeacher().then(res=>{
    teacherList.value=res.data.data
  })
}
onMounted(()=>{
  search()
})

const size = ref('default')
const background = ref(false)
const disabled = ref(false)
</script>
<style lang="less" scoped>

</style>
